<template>
    <div>
        <el-col :span="4">
            <el-menu :default-active="'/' + this.$route.path.split('/')[1]" class="el-menu-vertical" @open="handleOpen"
                @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
                <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
                    <i :class="item.icon"></i>
                    {{ item.navItem }}
                </el-menu-item>
            </el-menu>
        </el-col>
    </div>
</template>
<script>
    export default {
        name: "NavMenu",
        data() {
            return {
                navList: [
                    { name: '/', navItem: '首页', icon: 'el-icon-s-home' },
                    { name: '/project', navItem: '项目', icon: 'el-icon-s-cooperation' },
                    { name: '/task', navItem: '任务', icon: 'el-icon-s-order' },
                    { name: '/statistics', navItem: '看板', icon: 'el-icon-s-marketing' },
                    { name: '/msg', navItem: '消息&待办', icon: 'el-icon-s-home' },
                    { name: '/system', navItem: '系统设置', icon: 'el-icon-s-tools' },
                ]
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        mounted() {
            document.querySelector('.el-menu-vertical').style.height = document.documentElement.clientHeight + 'px';
        }
    };
</script>
<style lang="less" scoped>
</style>